<template>
  <div class="box">
    <div class="header">
      <van-nav-bar
        title="分类"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="main">
      <div class="left">
        <van-sidebar v-model="activeKey" dot="true">
          <van-sidebar-item
            :title="name"
            v-for="name in list"
            :key="name"
            @click="leap(name)"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <van-grid>
          <van-grid-item
            icon="photo-o"
            :text="item.brand"
            v-for="(item, index) in brandname"
            :key="index"
            @click="lapc(item)"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Sidebar, SidebarItem, Grid, GridItem } from "vant";

Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Grid);
Vue.use(GridItem);
import { categoryList, categoryBrand } from "../api/kind";
export default {
  name: "Kind",
  data() {
    return {
      activeKey: 0,
      list: [],
      brandname: [],
      categoryname:"手机"
    };
  },
  created() {
    categoryList().then((res) => {
      if (res.data.code == 200) {
        console.log("产品的分类列表", res.data);
        this.list = res.data.data;
      }
    });
    // this.$parent.brandname = "手机";
    categoryBrand({ category: "手机" }).then((res) => {
      console.log("产品分类下的品牌列表", res.data.data);
      // this.$parent.brandname = res.data.data;
      this.brandname = res.data.data;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    leap(n) {
      // this.$parent.categoryname = n;
      this.categoryname = n;
      categoryBrand({ category: n }).then((res) => {
        console.log(res.data.data);
        // this.$parent.brandname = res.data.data;
        this.brandname = res.data.data;
      });
    },
    lapc(n) {
      this.$router.push(`/Result/${this.categoryname}/${n.brand}`);
    },
  },
};
</script>
<style scoped>
.main {
  display: flex;
}
.right {
  flex: 1;
}
</style>
